import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';

import { Select, message, Spin } from 'antd';
import OperModal from '@/component/common/OperModal';
const LabelItem = OperModal.LabelItem;

import MModal from '@/component/common/MModal';

const Option = Select.Option;

import StoreListMini from '@/store/StoreListMini';
import BrokerListMini from '@/store/BrokerListMini';

import ApiHelper from '@/store/ApiHelper';
import { member_change_house, broker_houses } from '@/constants/ApiTypes';
import adminType from '@/tool/adminType';

@observer class BrokerChangeHouseModal extends Component {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func.isRequired,
        broker_name: PropTypes.string.isRequired,
        broker_id: PropTypes.any.isRequired
    };
    defaultState = {
        target_broker_id: '',
        spinning: false,
        brokerHouseList: [],
        selected_houses: []
    };
    state = { ...this.defaultState, show: false };
    componentDidMount() {
        this._isMounted = true;
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    //fix异步
    _setState = state => {
        if (this._isMounted) this.setState(state);
    };
    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            if (!this.state.show) this.getBrokerHouses(nextProps.broker_id);
            this._setState({ ...this.defaultState, show: true });
        } else {
            this._setState({ show: false })
        }
    }
    //获取经纪人名下房源
    getBrokerHouses = async broker_id => {
        this._setState({ spinning: true });
        const result = await ApiHelper.requestPost(broker_houses, { broker_id });
        if (!result.status) return;
        this._setState({
            spinning: false,
            brokerHouseList: result.info
        })
    };
    submit = async () => {
        const { broker_id } = this.props;
        const { target_broker_id, selected_houses } = this.state;
        if (target_broker_id == '') return message.warn('请选择转移给的经纪人！', 1.5);
        if (selected_houses.length == 0) return message.warn('请选择需要转移的房源！', 1.5);

        const data = { broker_id: broker_id, target_broker_id: target_broker_id, selected_houses: selected_houses.join(',') };
        const result = await ApiHelper.requestPost(member_change_house, data);
        if (result.status) {
            MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
            this.props.onClose(true);
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    };
    selectStore = value => {
        if (value == '') {
            return BrokerListMini.info.clear();
        }
        BrokerListMini.getInfo(value);
    };
    selectBroker = value => {
        this._setState({ target_broker_id: value });
    };
    selectHouse = value => {
        this._setState({ selected_houses: value });
    };
    render() {
        const { visible, onClose, broker_name } = this.props;
        const { target_broker_id, brokerHouseList, selected_houses } = this.state;
        const { submit, selectStore, selectBroker, selectHouse } = this;
        const storeListMini = StoreListMini.info;
        const brokerListMini = BrokerListMini.info;

        let storeOptionList = storeListMini.map((val, index) => {
            return <Option key={index} value={`${val.store_id}`}>{val.store_name}</Option>;
        });
        let brokerOptionList = brokerListMini.map((val, index) => {
            return <Option key={index} value={`${val.uid}`}>{val.realname}</Option>;
        });
        const brokerHouseOptionList = brokerHouseList.map((val, index) => {
            return <Option key={index} value={val.house_no}>{val.address_detail}</Option>;
        });
        return (
            <OperModal visible={visible} onClose={onClose} title="房源转移" width={520} height={210} onOk={submit}>
                <Spin tip="loading" spinning={this.state.spinning} delay={150}>
                    <LabelItem label={`选择${broker_name}的房源`}>
                        <Select placeholder="选择房源" mode="multiple" value={selected_houses}
                            style={{ width: 280, verticalAlign: 'middle' }}
                            onChange={selectHouse}>
                            {brokerHouseOptionList}
                        </Select>
                    </LabelItem>
                    <LabelItem label={`将${broker_name}的房源转移给`}>
                        {adminType() == 1 &&
                        <Select placeholder="选择门店" style={{ width: 150 }} onChange={selectStore}>
                            {storeOptionList}
                        </Select>}
                        <Select placeholder="选择经纪人" value={target_broker_id} style={{ width: 100, marginLeft: 10 }} onChange={selectBroker}>
                            {brokerOptionList}
                        </Select>
                    </LabelItem>
                </Spin>
            </OperModal>
        );
    }
}

export default BrokerChangeHouseModal;